import React, { useEffect, useState } from 'react'
import axios from 'axios'
import moment from 'moment'
import { connect } from 'react-redux'
import { changeUnFillUser } from '../../redux/actionCreator/lineLossFillActionCreater'
// 检查谁未填报
function CheckUnFill (props) {
  const { changeUnFillUser, unFillUser } = props

  // 检查谁没有填报
  const check = async () => {
    await axios.get("http://localhost:8081/system/lineLossFill/checkUnFill",
      {
        params: {
          username: localStorage.getItem("username"),
          month: moment().format('YYYY-MM')
        },
        headers: {
          satoken: localStorage.getItem("satoken")
        }
      }
    ).then(r => {
      changeUnFillUser(r.data.data)
    })
  }

  useEffect(() => {
    check()
  }, [])
  return (
    <>
      {unFillUser.length === 0 ? '' : <p className='unFillUser'>本月{unFillUser.map((item, index) => {
        return index === 0 ? item : (index === unFillUser.length - 1 ? "," + item : "," + item + ",")
      })}未填报</p>}
    </>

  )
}
// 获取公共状态
const mapStateToProps = (state) => {
  return {
    unFillUser: state.LineLossFillReducer.unFillUser
  }
}

// 修改公共状态的方法
const mapDispatchToProps = {
  changeUnFillUser
}

export default connect(mapStateToProps, mapDispatchToProps)(CheckUnFill)